<template>
    <div>
        <div class="tablist-content" v-for="l in m.products_info">
            <router-link :to="'/detaillist/'+l.product_id">
                <div class="product-img">
                    <img :src="l.image | imageFilter">
                </div>
                <div class="product-info">
                    <p class="product-info-title">{{l.product_name}}</p>
                    <div class="product-info-price">
                        <div class="count">已售&nbsp;{{l.order_count}}</div>
                        <div class="price">
                            <span>￥</span>
                            <span class="num">{{ l.special_price || l.default_price }}</span>
                            <span class="price-qi">起</span>
                            <div class="clear"></div>
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>
            </router-link>
        </div>
    </div>
</template>

<script>
    export default{
        props:['m'],
//        mounted(){
//            console.log($('img.lazy'))
//            $("img.lazy").lazyload({
//                effect: "fadeIn", // 载入使用何种效果
//                // effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
//                container: $(".page-content"),  // 对某容器中的图片实现效果
//                // container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
//            });
//        }
    }

</script>

<style>
    .tablist-content{
        padding:24px 0;
        border-bottom: 1px solid #e0e0e0;
        overflow: hidden;
    }
    .product-img{
        width:100%;
    }
    .product-img img{
        width:100%;
    }
    .product-info-title{
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin: 24px 0;
        font-size: 14px;
        color: #363636;
    }
    .product-info-price .count{
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        margin-top: -2px;
        height: 18px;
        color: #b4b4b4;
        line-height: 18px;
        font-size:12px;
        display: inline-block;
    }
    .product-info-price .price{
        float: right;
        color: #fb5f10;
        display: inline-block;
    }
    .price .price-qi{
        color: #363636;
        font-size:12px;
    }
    .price .num{
        font-size: 24px;
        font-weight: 700;
    }

</style>